import { Layout ,Menu } from 'antd';
const { Header,
     Footer,
     Sider,
     Content } = Layout;
import './home.css'

function Home() {
    // 样式定义
    const layoutStyle = {
        minWidth: '100vw',
        minHeight: '100vh',
    };
    
    const siderStyle = {
        color: '#fff',
        padding: '20px'
    };
    
    const headerStyle = {
        backgroundColor: '#fff',
        padding: '0 20px'
    };
    
    const contentStyle = {
        margin: '24px 16px',
        padding: '24px',
        backgroundColor: '#fff'
    };
    
    const red = '#ccc';

    return (
        <Layout style={layoutStyle}>
            <Sider width="15%" style={siderStyle}>
                <Menu
                    theme="dark"
                >
                    <Menu.Item>Home</Menu.Item>
                    <Menu.Item>Blog</Menu.Item>
                    <Menu.Item>User</Menu.Item>
                </Menu>
            </Sider>
            <Layout>
                <Header style={headerStyle}>Header</Header>
                <Content style={contentStyle}>Content</Content>
                <Footer style={{ backgroundColor : red }}>Footer</Footer>
            </Layout>
        </Layout>
    );
}

export default Home;  // 修改导出方式